<template>
	<view class="control">
		<u-gap height="20rpx" bgColor="#f0f0f0"></u-gap>
		<view class="tab-filter"  v-if="shouhuan">
			<view class="tabs">
				<view class="tab-item" :class="{'active': selected_Tab == item.id}" @click="selectedTab(item,index)"
					v-for="(item,index) in tabsList" :key="index">
					<text>{{item.name}}</text>
				</view>
				<!-- <view class="tab-item" :class="{'active': selected_Tab == '2'}" @click="selectedTab(2)">
					<text>未开班 ({{finishedCount}})</text>
				</view>
				<view class="tab-item" :class="{'active': selected_Tab == '3'}" @click="selectedTab(3)">
					<text>已结班 ({{finishedCount}})</text>
				</view> -->
			</view>
		</view>
		<view class="" v-if="shouhuan">
			<scroll-view scroll-y="true"
				style="width: 94%;background-color: #fff;height: 50vh;margin-left: 3%;padding: 10rpx;">
				<view class="add"
					style="display: flex;flex-direction: row;justify-content: flex-end;margin-right: 20rpx;">
					<u-icon name="plus-circle" @click='addSubTime' size="28" color="#6b65f7"></u-icon>
				</view>
				<view class="item sub-item" v-for="(item,index) in subTineList" :key="index">
					<!-- <view class="flex-space-between">
						<view class="item-title">预约时间段{{index +1}}</view>
						<view class="item-title">手环号</view>
					</view> -->
					<view class="flex-space-between bottom">
						<view class="sub-value flex-align">
							<view class="" style="font-size: 26rpx;font-weight: 700;">
								手环：
							</view>
							<input type="text" v-model="item.num" placeholder="请输入手环号" style="width: 460rpx;" />
						</view>
						<view class="close" @click="removeSubTime(index)">
							<u-icon name="close" size="20"></u-icon>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="box-2" style="width: 94%;margin-left: 3%;padding: 10rpx;">
				<u-parse :content="homeData.over_rule"></u-parse>
			</view>
			<view class="footer">
				<view class=""></view>
				<view class="btn" @click="submit">查询</view>
			</view>
		</view>
		<view class="" v-if="!shouhuan">
			<scroll-view scroll-y class="listall" v-for="(item, index) in resultlist" :key="index">
				<v-gap />
				<view class="d-flex flex-column listsee">
					<view class="" style="color: red;">
						超时时间：{{item.overtime_minute}}分钟
					</view>
					<view class="goods-item flex-align" style="margin-top: 10rpx;">
						<view class="image">
							<view
								style="width: 100%;height: 200rpx;background-color: #EDF5F5;display: flex;lex-direction: row; justify-content: center; align-items: center;">
								<image style="width: 100%;height: 200rpx;"
									src="https://sass-test.doit10019.com/upload/202504/03091952-47026369158285309.png?attname=%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250403091921.png"
									mode="aspectFit"></image>
							</view>
						</view>
						<view class="detail">
							<view>
								<view class="title elipsis-1">{{item.goods_name}}</view>
								<view class="" style="display: flex; flex-direction: row; align-items: center;">
									<view class="tag flex-align">
										手环号：{{item.outer_code}}
									</view>
								</view>
								<view style="margin-top: 15rpx;display: flex;lex-direction: row;align-items: center;">
									<view class="" style="font-size: 25rpx;">
										超时金额:
									</view>
									<price :value="item.overtime_fee" :color="'#ff4105'"></price>
								</view>
								<view style="margin-top: 15rpx;display: flex;lex-direction: row;align-items: center;">
									<view class="" style="font-size: 25rpx;">
										付款金额:
									</view>
									<price :value="item.need_pay" :color="'#ff4105'"></price>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>

			<view class="footer">
				<view class="" style="display: flex; flex-direction: row; align-items: center;">合计：<text
						style="color: red;">¥{{totalAmount}}</text> </view>
				<view class="btn" @click="showCoupons">去支付</view>
			</view>
		</view>
	</view>
</template>

<script>
	const market = require("@/api/market/index.js");
	const index = require('@/api/personal/index.js')
	export default {
		data() {
			return {
				subTineList: [ //预约时间段
					{
						num: 0, //人数
					}
				],
				shouhuan: true,
				homeData: {},
				numArray: [],
				resultlist: [],
				totalAmount: 0,
				tabsList: [{
						name: "男",
						id: 1
					},
					{
						name: "女",
						id: 2
					}
				],
				selected_Tab: 1,
				status: 1
			}
		},
		onLoad() {
			this.getAppletConfig()
		},
		methods: {
			selectedTab(item, index) {
				this.selected_Tab = item.id
				this.status = item.id
			},
			async getAppletConfig() {
				let that = this
				let data = {
					'weixinAppId': this.$https.weixinAppId,
					'projectId': getApp().globalData.projectId,
				}
				let result = await index.index(data)
				if (result.code == 1) {
					that.homeData = result.data // 首页完整数据

				}
			},
			submit() {
				const numArray = this.subTineList.map(item => item.num);
				console.log(numArray);
				this.numArray = numArray
				this.shouhuan = false
				this.moreBrackletCheck()
			},
			async showCoupons() {
				uni.navigateTo({
					url: './coursewareDetails'
				})
				let params = {
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
					code: this.numArray,
					venue_id: this.homeData.venue,
					open_id: uni.getStorageSync("openid"),
					sex: this.status
				}
				let res = await market.createOverOrder(params)
				if (res.code === 1) {
					console.log(res, '5552525')

					if (res.data.order_money >= '0.01') {
						var that = this
						uni.navigateTo({
							url: "/page_venues/pages/venuesDetail/pay/pay?amount=" +
								res.data.order_money +
								"&payWaitTime=" +
								res.data.pay_waiting_time +
								"&order_id=" +
								res.data.order_id +
								"&orderid=" +
								res.data.id +
								"&order_type=" +
								res.data.order_type + "&belong=" +
								'court' +
								"&chaoshitype=" +
								2 + "&venue_id=" +
								res.data.venue_id,
						});
					}
				}else{
					uni.showToast({
						title: res.info,
						icon: 'none',
						mask: true
					})
				}
			},
			async moreBrackletCheck() {
				let postData = {
					code: this.numArray,
					venue_id: this.homeData.venue,
					sex: this.status
				}
				let res = await market.moreBrackletCheck(postData);
				if (res.code == 1) {
					this.resultlist = res.data.data
					// 将 item.need_pay 转换为数值类型再进行累加
					this.totalAmount = this.resultlist.reduce((acc, item) => {
						const payAmount = parseFloat(item.need_pay) || 0;
						return acc + payAmount;
					}, 0);
					console.log(this.totalAmount, 'totalAmount');
				}
			},
			//新增
			addSubTime() {
				this.subTineList.push({
					num: 0,
				})
			},
			//删除
			removeSubTime(indexs) {
				this.subTineList = this.subTineList.filter((item, index) => {
					return index !== indexs
				})
			},

		},

	}
</script>

<style scoped lang="scss">
	.control {
		width: 100%;
		height: 100vh;
		overflow: auto;
		padding-bottom: 160rpx;
		background-color: #f0f0f0;

		.tab-filter {
			background-color: #ffffff;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			width: 94%;
			background-color: #fff;
			margin-left: 3%;
			padding: 10rpx;
		}

		.tabs {
			display: flex;
			border-bottom: 2rpx solid #f0f0f0;
		}

		.tab-item {
			padding: 16rpx 20rpx;
			margin-right: 32rpx;
			position: relative;
			width: 100rpx;
			text-align: center;
		}

		.tab-item.active {
			color: #2979ff;
		}

		.tab-item.active::after {
			content: '';
			position: absolute;
			bottom: -2rpx;
			left: 0;
			right: 0;
			height: 4rpx;
			background-color: #2979ff;
		}

		.box-2 {
			margin-top: 20rpx;
			padding: 30rpx 30rpx;
			// background-color: rgb(255, 255, 255);
		}

		.listall {
			margin-bottom: 20rpx;

			.listsee {
				background-color: #fff;
				padding: 30rpx;
				border-radius: 10rpx;
				width: 94%;
				margin-left: 3%;
				border: 2rpx #fff solid;

				.goods-item {
					height: 200rpx;

					.image {
						width: 200rpx;
						height: 100%;
						border-radius: 7rpx;
						// overflow: hidden;
						position: relative;

						/deep/ .u-transition {
							width: 100%;
							height: 100%;
						}

						.image-info {
							position: absolute;
							bottom: 0;
							width: 100%;
							left: 0;
							font-size: 24rpx;
							text-align: center;
							color: white;
							padding: 10rpx 0;
							background-color: rgba(0, 0, 0, 0.5);
						}
					}

					.detail {
						flex: 1;
						width: 0;
						height: 100%;
						display: flex;
						flex-direction: column;
						margin-left: 20rpx;
						justify-content: space-between;

						.title {
							font-size: 28rpx;
							margin-bottom: 10rpx;
							width: 100%;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.tag {
							font-size: 22rpx;
							color: #2F75FA;
							background-color: #d5e3fe;
							border-radius: 8rpx;
							padding: 5rpx 10rpx;
							margin-right: 20rpx;
						}

						.tags {
							font-size: 22rpx;
							color: #2F75FA;
							background-color: #d5e3fe;
							border-radius: 8rpx;
							padding: 5rpx 10rpx;
							margin-left: 20rpx;
						}

						.detail-2 {
							color: #a3a3a3;
							font-size: 23rpx;

							image {
								width: 25rpx;
								height: 25rpx;
								margin-right: 10rpx;
							}
						}

						.price {
							color: #ff6a42;

							text {
								font-weight: 700;
								font-size: 37rpx;
							}
						}

						.info {
							color: #a3a3a3;
							font-size: 23rpx;
							margin-left: 15rpx;
							transform: translateY(4rpx);
						}
					}
				}
			}

			.active1 {
				border: 2rpx #0000ff solid;
			}
		}

		.item {
			padding: 29rpx 30rpx 30rpx;
			border-bottom: solid 2rpx rgb(239, 239, 239);

			.item-title {
				color: rgb(153, 153, 153);
				font-size: 28rpx;
				font-weight: 500;
				margin-bottom: 20rpx;
			}

			.value {
				color: rgb(51, 51, 51);
				font-size: 28rpx;
				font-weight: 500;
			}

			.time-cell {
				color: rgb(51, 51, 51);
				font-size: 28rpx;
				font-weight: 500;
				justify-content: flex-start;

				.time {
					width: 49%;

					&:last-of-type {
						margin-left: 20rpx;
					}
				}
			}

			.week-list {
				display: grid;
				grid-template-columns: repeat(5, 1fr);
				grid-gap: 20rpx;
				position: relative;

				.week-item {
					padding: 15rpx 0;
					background-color: rgb(243, 243, 243);
					border-radius: 5rpx;
					text-align: center;
					color: rgb(51, 51, 51);
					font-size: 24rpx;
					font-weight: 500;
					border: solid 2rpx transparent;
					box-sizing: border-box;
				}

				.active {
					color: rgb(99, 93, 247);
					background-color: rgba(99, 93, 247, 0.2);
					border: solid 2rpx rgb(99, 93, 247);
					position: relative;

					&:before {
						display: block;
						content: '';
						position: absolute;
						width: 27rpx;
						height: 28rpx;
						right: -2rpx;
						bottom: -2rpx;
						background-image: url("https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/46b1cc85fcb0fd76095daf823b7d2bb4a3235519.png");
						background-repeat: no-repeat;
						background-size: 100%;
					}
				}

				.check {
					color: rgb(51, 51, 51);
					font-size: 24rpx;
					position: absolute;
					bottom: 10rpx;
					right: 0;
				}
			}
		}

		.sub-item {
			.item-title {
				width: 45%;
			}

			.bottom {
				position: relative;

				.close {
					position: absolute;
					right: 0;
				}

				.sub-value {
					width: 90%;
					color: rgb(51, 51, 51);
					font-size: 28rpx;
					font-weight: 500;

					.hr {
						margin: 0 16rpx;
					}

					input {
						width: 80rpx;
						padding-right: 20rpx;
					}
				}
			}
		}

		.footer {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			z-index: 2;
			background-color: white;
			padding: 20rpx 20rpx;
			box-sizing: border-box;
			box-shadow: 0px -8rpx 51rpx rgba(0, 0, 0, 0.04);
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.btn {
				color: rgb(255, 255, 255);
				background-image: linear-gradient(0deg, rgb(52, 116, 255) 0%, rgb(108, 184, 255) 100%);
				border-radius: 60rpx;
				padding: 20rpx 0;
				font-size: 30rpx;
				text-align: center;
				font-weight: 700;
				width: 220rpx;
			}

		}

		.add {
			margin-top: 30rpx;
		}
	}
</style>